<script setup lang="ts">
import { ref } from "vue";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { materialTypeList } = storeToRefs(systemStore);
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});

const dialogVisible = ref(false);
const emits = defineEmits(["submit"]);

const handleSave = () => {
  dialogVisible.value = false;
  emits("submit");
};

const handleCancel = () => {
  dialogVisible.value = false;
};

defineExpose({
  open: () => {
    dialogVisible.value = true;
  }
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="可超领物料处置确认"
    width="50%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <p class="text-[14px] text-[#ED7B2F] mb-[16px]">
      注意：如处置数量异常，请核实并及时调整库存数量，确认提交会将如下处置与其他物料的出库一并提交
    </p>
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="materialCode" label="可超领物料编码" />
      <el-table-column prop="materialName" label="可超领物料名称" />
      <el-table-column prop="materialSpecs" label="可超领物料规格" />
      <el-table-column prop="warehouseName" label="仓库名称"/>
      <el-table-column prop="boundType" label="处置类型">
        <template #default="scope">
          <el-text>{{
            materialTypeList.find(
              val => val.dictLabelValue == scope.row.materialType
            )?.dictLabelName
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="处置数量" />
    </el-table>
    <template #footer>
      <div class="flex flex-row justify-end pt-[24px] pr-[16px] pl-[16px]">
        <el-button type="primary" @click="handleSave">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
